import {baseUrl} from "../../settings/Settings.ts";
import {useState} from "react";

type CartElementProps = {
    item: CartElement;
    updateCart: () => void
};

const CartElement = (props: CartElementProps) => {
    const [isVisible, setIsVisible] = useState(true);


    const {item, updateCart} = props


    const removeItem = async () => {
        try {
            const formData = {bookId: item.bookId}; // assuming item.item.id is the bookId
            const response = await fetch(`${baseUrl}/api/cart/remove`, {
                method: 'POST',
                headers: {
                    'Access-Control-Allow-Origin': '*',
                    'Access-Control-Allow-Headers': 'Content-Type, Accept, Origin, X-Requested-With',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData), // convert formData to JSON
                credentials: 'include'
            });
            const data = await response.json();
            if (response.ok) {
                updateCart()
                // hide the element
            }
        } catch (error) {
            console.error('Error fetching data');
        }


    }

    return (

        <div className="row m-2 ps-2 pe-2 row-card-item"  data-id={item.bookId}
             style={{ display: isVisible ? '' : 'none' }}>
            <hr/>
            <div className="col-4">
                <div className="container p-0 m-0">
                    <div className="row">
                        <div className="col-6 d-flex flex-column justify-content-center align-content-center">
                            <img
                                className="bd-placeholder-img rounded-circle card-img-top image-holder crop-image"
                                src={baseUrl + item.imageUrl}
                                width="130"
                                height="140"
                            />
                        </div>
                        <div className="col-6">
                            <div className="container p-0 m-0">
                                <div className="row">
                                    <div className="col-12 d-flex flex-column justify-content-center">
                                        <h6 className="my-0">{item.title}</h6>
                                        <small className="text-body-secondary">{item.description}</small>
                                        <small className="text-body-secondary">Book
                                            ID: {item.bookId}</small>
                                        <small className="text-body-secondary">Stack ID: {item.stackId}</small>
                                        <span
                                            className="badge rounded-pill mt-3 text-center text-remove"
                                            data-id={item.bookId}
                                            onClick={removeItem}
                                        >
                      Remove
                    </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div className="col-2 text-end">
        <span
            data-value={item.stackId}
            className="badge rounded-pill badge-counter badge-total"
        >
          <span>{item.condition}</span>
        </span>
            </div>
        </div>
    )
}

export default CartElement